<template>
    <!--服务指南-->
    <div class="service-guide-box full-background">
        <div class="contain">
            <div class="content-box">
                <!--标题、查看更多-->
                <div class="guide-item">
                    <icon-title :text="'服务指南'"><a-icon class="icon" type="message" /></icon-title>
                </div>
                <div class="content-item">
                    <!--标题栏-->
                    <div class="title-bar">
                        <div class="title-box" >
                            <title-label
                                v-for="(item, index) in topicDataList"
                                :class="item.class"
                                :resource-data="{title:item.title}"
                                :to="{query:{code:item.code}}"
                                :key="index"
                            />
                        </div>
                    </div>
                    <!--内容展示栏-->
                    <div class="info-box" >
                        <!--内容-->
                        <div id="service-guide-html-content" v-html="albumData.firstItem.content">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 服务指南
import IconTitle from "../../components/ToolComponent/IconTitle";
import TitleLabel from "../../components/SourseDataComponent/Label/TitleLabel";
import LoadTopicPageDataMixin from "@/mixins/LoadTopicPageDataMixin";
import {getResource} from "@/api/CommonApi";
import LoadTopicInfoMixin from "@/mixins/LoadTopicInfoMixin";

//服务指南栏目code
const CODE ="service-guide";
export default {
    name: "ServiceGuide",
    components:{
        IconTitle,
        TitleLabel
    },
    mixins:[
        LoadTopicPageDataMixin,
        LoadTopicInfoMixin
    ],
    data(){
        return{
            //栏目
            topicDataList:[],
            //专辑数据
            albumData:{
                firstItem:{
                  content:''
                }
            },
            //当前选择的query
            currentQuery:{
                code:'reader-intention',
            }
        }
    },
    created(){
        this.currentQuery.code = this.$route.query.code || this.currentQuery.code;
        //加载栏目信息
        this.loadTopicInfo(CODE).then(() => {
            //异步操作，提取子栏目数组
            this.topicDataList = this.topicData.child || [];

            //设置code筛选项的高亮
            for(let i = 0; i < this.topicDataList.length; i++){
                const item = this.topicDataList[i];
                item.class = {};
                if(this.currentQuery.code === item.code){
                    item.class = {active : true};
                }
            }
            console.log("this.topicDataList = ", this.topicDataList);
        }).catch(err => {
            console.log(err);
        })


        this.setPageSize(10);
        //设置获取数据的code
        this.setPageDataCode(this.currentQuery.code);
        //加载数据
        this.loadPageData(1).then(() => {
            console.log("this.pageData = ", this.pageData);
            if(this.pageData.records.length > 0) {
              const id = this.pageData.records[0].id;
              getResource(id).then(res => {
                this.albumData = res.result;
                console.log("this.albumData : ", this.albumData);
              });
            }
            else{
                this.albumData.firstItem.content = '<p>没有更多内容了</p>'
            }
        });



    },
    watch:{
        $route(){
            this.currentQuery.code = this.$route.query.code || this.currentQuery.code;

            //设置code筛选项的高亮
            for(let i = 0; i < this.topicDataList.length; i++){
                const item = this.topicDataList[i];
                item.class = {};
                if(this.currentQuery.code === item.code){
                    item.class = {active : true};
                }
            }

            this.setPageSize(10);
            //设置获取数据的code
            console.log("this.$route.query.code = ", this.$route.query.code);
            this.setPageDataCode(this.currentQuery.code)
            //加载数据
            this.loadPageData(1).then(() => {
              if(this.pageData.records.length > 0) {
                const id = this.pageData.records[0].id;
                getResource(id).then(res => {
                  this.albumData = res.result;
                  console.log("this.albumData : ", this.albumData);
                });
              }
              else{
                  this.albumData.firstItem.content = '<p>没有更多内容了</p>'
              }
            });


        }
    }

}
</script>

<style lang="less" scoped>
@import "../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @width: 100vw;
    @min-height:100vh;
    .service-guide-box{
        background-image: url("../../assets/Phone-BackgroundImage/AboutUs.png");
        background-position-x: center;
        background-repeat: no-repeat;
        width:@width;
        min-height: @min-height;
        .contain{
            width:@width;
            min-height: @min-height;
            display:grid;
            grid-template-rows: repeat(10, 1fr);
            grid-template-columns: repeat(10, 1fr);
            .content-box{
                @content-width:calc(@width / 10 * 8);
                @content-height:calc(@min-height / 10 * 8);
                grid-row: 2 / span 8;
                grid-column: 2 / span 8;
                width: @content-width;   // 80vw
                min-height: @content-height;  //144vw
                justify-self: center;
                align-self: flex-start;
                display: flex;
                flex-direction: column;
                justify-content:center;
                align-items: center;
                background-color:white;
                border-radius: 1vw;
                .guide-item{
                    width:calc(@content-width - 6vw);  //80vw - 6vw
                    height:7vw;
                    display:flex;
                    justify-content: space-between;
                    .icon{
                        line-height:7vw;
                        font-size:4vw;
                        color:rgba(15, 121, 205, 1);
                    }
                    .look-more{
                        height:7vw;
                    }
                }
                //内容列表
                .content-item{
                    width:calc(@content-width - 6vw);  //80vw - 6vw
                    min-height:calc(@content-height - 10vw);  //144vw - 10vw
                    border-top: 1px solid rgba(15, 121, 205, 1);
                    display:flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    //标题栏
                    .title-bar{
                        width:calc(@content-width - 6vw);
                        min-height:20vw;
                        display:flex;
                        justify-content:center;
                        align-items: center;
                        box-sizing: border-box;
                        padding:2.5vw 0;
                        .title-box{
                            width:calc(@content-width - 16vw); //80vw - 16vw
                            min-height:15vw;
                            display:flex;
                            justify-content: space-between;
                            align-content: space-between;
                            flex-wrap:wrap;
                        }
                    }
                    //信息内容展示
                    .info-box{
                        width:calc(@content-width - 6vw);
                        height:calc(@content-height - 35vw); //144vw - 35vw
                        background-color:rgba(238, 238, 238, 1);
                        padding:3vw;
                        color: #4E4E4E;
                        font-size:3vw;
                        line-height:5vw;
                        box-sizing:border-box;
                        overflow-y: scroll;
                        .line-ellipsis(22);

                    }
                }
            }
            .slip-down-box{
                grid-row:10 / span 1;
                grid-column: 2 / span 8;
                width:calc(@width / 10 / 3 * 2);
                height:calc(@width / 10);
                place-self: center;
                transform: rotate(90deg);
                font-size: calc(@width / 10 / 3 * 2);
                .down-img{
                    color:RGBA(122, 128, 118, 1);
                }
            }
        }
    }
    .active{
        background-color: #448ACA;
        color:white;
        border:none;
    }
}


//pc
@media only screen and (min-width: 576px){
    @width: 900px;
    @height: 360px;
    .service-guide-box{
        background-image: url("../../assets/PC-BackgroundImage/serve-guide.png");
        .contain{
            .container;
            display:grid;
            grid-template-rows: 1.5fr 4fr 1fr;
            .content-box{
                width: @width;
                min-height: @height;
                grid-row:2 / span 1;
                grid-column: 1 / span 1;
                justify-self: center;
                align-self: flex-start;
                display: flex;
                flex-direction: column;
                justify-content:center;
                align-items: center;
                background-color:white;
                border-radius: 10px;
                .guide-item{
                    width:calc(@width - 20px);
                    height:30px;
                    display:flex;
                    justify-content: space-between;
                    .icon{
                        line-height:20px;
                        font-size:18px;
                        color:rgba(15, 121, 205, 1);
                    }
                    .look-more{
                        height:30px;
                    }
                }
                //内容列表
                .content-item{
                    width:calc(@width - 20px);  //900px - 20px
                    min-height:calc(@height - 50px);  //360px - 50px
                    border-top: 1px solid rgba(15, 121, 205, 1);
                    padding-bottom:20px;
                    //标题栏
                    .title-bar{
                        width:calc(@width - 20px);
                        height:60px;
                        display:flex;
                        justify-content:center;
                        align-items: center;
                        box-sizing: border-box;
                        .title-box{
                            width:500px;
                            height:30px;
                            display:flex;
                            justify-content: space-between;
                            align-items: flex-start;
                            box-sizing: border-box;
                        }

                    }
                    //信息内容展示
                    .info-box{
                        width:calc(@width - 20px);
                        height:calc(@height - 110px);
                        background-color:rgba(238, 238, 238, 1);
                        padding:15px 30px;
                        color: #4E4E4E;
                        font-size:14px;
                        line-height:22px;
                        box-sizing:border-box;
                        overflow-y: scroll;

                    }
                }
            }
            .slip-down-box{
                display:none;
            }
        }
    }
    .active{
        background-color: #448ACA;
        color:white;
        border:none;
    }

}
</style>
